<!DOCTYPE html>
<html>
<head>
  <title>Electromagnetic Field Diagram</title>
</head>
<body>
  <canvas id="physicsCanvas" width="400" height="420"></canvas>
  <script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Clear canvas with a white background
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // --- Style setup ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;

    // --- Coordinates ---
    const a = { x: 50, y: 290 };
    const b = { x: 120, y: 140 };
    const c = { x: 320, y: 140 };
    const d = { x: 250, y: 290 };

    const ai = { x: 72, y: 275 };
    const bi = { x: 128, y: 155 };
    const ci = { x: 298, y: 155 };
    const di = { x: 242, y: 275 };

    // --- Draw Shapes ---

    // Outer parallelogram
    ctx.beginPath();
    ctx.moveTo(a.x, a.y);
    ctx.lineTo(b.x, b.y);
    ctx.lineTo(c.x, c.y);
    ctx.lineTo(d.x, d.y);
    ctx.closePath();
    ctx.stroke();

    // Inner parallelogram
    ctx.beginPath();
    ctx.moveTo(ai.x, ai.y);
    ctx.lineTo(bi.x, bi.y);
    ctx.lineTo(ci.x, ci.y);
    ctx.lineTo(di.x, di.y);
    ctx.closePath();
    ctx.stroke();

    // "Legs" or depth lines
    const legLength = 30;
    ctx.beginPath();
    ctx.moveTo(a.x, a.y);
    ctx.lineTo(a.x, a.y + legLength);
    ctx.moveTo(b.x, b.y);
    ctx.lineTo(b.x, b.y + legLength);
    ctx.moveTo(c.x, c.y);
    ctx.lineTo(c.x, c.y + legLength);
    ctx.moveTo(d.x, d.y);
    ctx.lineTo(d.x, d.y + legLength);
    ctx.stroke();

    // --- Draw Labels & Text ---
    ctx.font = 'italic 20px Times New Roman';
    ctx.textBaseline = 'middle';

    // a, b, c, d labels
    ctx.textAlign = 'right';
    ctx.fillText('a', a.x - 5, a.y + 5);
    ctx.fillText('b', b.x - 5, b.y);
    ctx.textAlign = 'left';
    ctx.fillText('c', c.x + 5, c.y);
    ctx.fillText('d', d.x + 5, d.y + 5);

    // l1 and l2 labels
    ctx.textAlign = 'left';
    // l1
    const l1_pos = { x: 90, y: 215 };
    ctx.fillText('l', l1_pos.x, l1_pos.y);
    const l_width = ctx.measureText('l').width;
    const originalFont = ctx.font;
    ctx.font = 'italic 14px Times New Roman'; // smaller font for subscript
    ctx.fillText('1', l1_pos.x + l_width - 2, l1_pos.y + 7);
    ctx.font = originalFont; // reset font

    // l2
    const l2_pos = { x: 213, y: 155 };
    ctx.fillText('l', l2_pos.x, l2_pos.y);
    const l_width2 = ctx.measureText('l').width;
    ctx.font = 'italic 14px Times New Roman'; // smaller font for subscript
    ctx.fillText('2', l2_pos.x + l_width2 - 2, l2_pos.y + 7);
    ctx.font = originalFont; // reset font

    // Compass directions and Caption
    ctx.font = '24px STSong, SimSun, serif';
    ctx.textAlign = 'center';

    // 北 (North)
    ctx.fillText('北', (b.x + c.x) / 2, b.y - 30);

    // 南 (South)
    ctx.fillText('南', (a.x + d.x) / 2, a.y + 40);

    // Caption
    ctx.font = '22px STSong, SimSun, serif';
    ctx.fillText('电图 3.4.1', canvas.width / 2, canvas.height - 25);
  </script>
</body>
</html>